<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>

    <style type="text/css" media="screen">
        #editor {
            width: 100%;
            height: 623px;
        }
    </style>


</head>
<body>


<h1> user_profile.html : </h1>

<img th:src="@{/img/aaa.jpg}" style="width:123px; height:123px;  "/>

<div style="font-size: 32px; ">
    <span th:text="${result_null}"></span>
</div>


<table border="1" bgcolor="#f0ffff">
    <thead style="font-size: 16px">
    <tr>
        <!--    <th  th:text="${field.key}"  > </th>-->
        <!--    <th   th:text="${item}"  >asdasdad</th>-->
        <th th:each="item, iterStat : ${column}">
            <h1 th:text="${item}"></h1>
        </th>
    </tr>
    </thead>
    <tbody th:each="item : ${results}">
    <tr>
        <td th:each="col : ${item}">
            <h2 th:text="${col}"></h2>
        </td>

    </tr>
    </tbody>
</table>


<div id="editor"></div>


<!--

<div   th:each="item, iterStat : ${results}"  style="font-size: 32px">
 <span th:text="${item}"></span>

<div th:each="field : ${item}">
  <span th:text="${field.key}"></span> :
</div>

</div>

-->


</body>
<script th:inline="javascript">

    var sql__ = [[${sql}]];
    console.log(sql__);

    var column__ = [[${column}]];
    console.log(column__);

    var result_null__ = [[${result_null}]];
    console.log(result_null__);

    var editor = ace.edit("editor"); //实例化ace
    editor.setTheme("ace/theme/monokai"); //这里是设置代码编辑器的主题，听说ace包含24个主题呢
    // editor.session.setMode("ace/mode/javascript");//这里是设置代码编辑器按哪种语言显示代码高亮，听说ace支持45种语言呢
    editor.session.setMode("ace/mode/sql");

    //启用提示菜单

    ace.require("https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/language_tools");

    editor.setOptions({
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true,
        fontSize: 30,
    });


    // var editor = ace.edit("editor");
    // editor.setTheme("ace/theme/twilight");  设置主题
    // 设置值:  editor.setValue("the new text here"); // 或 session.setValue
    // 获取值:  editor.getValue(); // 或 session.getValue

    editor.setValue(sql__);

    // 自定义补全
    var languageTools = ace.require("ace/ext/language_tools");

    var automatic_completion_word_list = [];
    let bbb = new Object();
    bbb.value = "bbb";
    automatic_completion_word_list.push(bbb);

    for (let i = 0; i < column__.length; i++) {
        let my_oj = new Object();
        my_oj.value = column__[i];
        automatic_completion_word_list.push(my_oj)
    }

    console.log(automatic_completion_word_list);

    languageTools.addCompleter({
        getCompletions: function (editor, session, pos, prefix, callback) {
            callback(null, automatic_completion_word_list);
        }
    });

    document.addEventListener("keydown", function (event) {
        if (event.ctrlKey && event.key === "Enter") {
            // 在这里执行您想要的操作
            console.log("CTRL + Enter 被按下");
            let input_sql = editor.getValue();
            console.log(input_sql);
            window.location.href = "/sql?sql=" + input_sql;          // 跳转到本网页
        }
    });


</script>
</html>